<template>
  <div class="pagination">
    <button
      class="pagination__btn"
      @click="prev"
      :disabled="myCurrentPage <= 1"
    >
      <span class="iconfont icon-arrow-left-bold"></span>
    </button>
    <ul class="pagination__pager">
      <li
        :class="{
          'pagination__pager-number': true,
          active: myCurrentPage === 1,
        }"
        @click="goPage(1)"
      >
        1
      </li>
      <li
        class="iconfont icon-elipsis pagination__pager-number"
        v-if="startEnd.start >= 3"
      ></li>
      <li
        :class="{
          'pagination__pager-number': true,
          active: myCurrentPage === startEnd.start + index,
        }"
        v-for="(num, index) in startEnd.end - startEnd.start + 1"
        :key="startEnd.start + index"
        @click="goPage(startEnd.start + index)"
      >
        {{ startEnd.start + index }}
      </li>
      <li
        class="iconfont icon-elipsis pagination__pager-number"
        v-if="startEnd.end <= totalPages - 2 && totalPages > 7"
      ></li>
      <li
        :class="{
          'pagination__pager-number': true,
          active: myCurrentPage === totalPages,
        }"
        @click="goPage(totalPages)"
        v-if="totalPages >= 2"
      >
        {{ totalPages }}
      </li>
    </ul>
    <button
      class="pagination__btn"
      @click="next"
      :disabled="myCurrentPage >= totalPages"
    >
      <span class="iconfont icon-arrow-right-bold"></span>
    </button>
    <select class="pagination__page-sizes" v-model="myPageSize">
      <option
        v-for="(pageSize, index) in pageSizes"
        :key="index"
        :value="pageSize"
      >
        每页 {{ pageSize }} 条
      </option>
    </select>
    <span class="pagination__total">共 {{ total }} 条</span>
  </div>
</template>

<script>
export default {
  name: "XPagination",
  props: {
    currentPage: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 5,
    },
    pageSizes: {
      type: Array,
      // 如果默认值是引用类型，必须是函数形式（原因和data一致）
      default: () => [5, 10, 15, 20],
    },
    total: {
      type: Number,
      default: 0,
    },
  },
  computed: {
    // 总页数
    totalPages() {
      return Math.ceil(this.total / this.myPageSize);
    },
    // 中间按钮的开头和结尾(不包含最开头最结尾)
    startEnd() {
      /*
        场景一： 1 ... 3 4 [5] 6 7 ... 12
          start = currentPage - 2
          end = currentPage + 2
          end = start + 4

        场景二: 
          [1] 2 3 4 5 6 ... 12
          1 [2] 3 4 5 6 ... 12
          start = currentPage - 2 = 2 - 2 = 0
          end = start + 4 = 0 + 4 = 4

          实际希望：start=2 end=6
          解决：
            start有最小值，2

        场景三：
          1 ... 7 8 9 10 [11] 12
          start = 11 - 2 = 9
          end = 9 + 4 = 13

          实际希望：start=7 end=11
          解决：
            end有最大值，totalPages - 1
        
        场景四：
          1 2 [3] 4 5
          1 2 [3] 4 5 6
          1 2 [3] 4 5 6 7
            start = 3 - 2 = 1 < 2 = 2
            end = 2 + 4 = 6 > 4 = 4
            start = 4 - 4 = 0
          
          实际希望：start=2 end=4

        场景五：
          [1]
          [1] 2

          此时不要中间按钮

          让 end - start + 1 = 0
      */
      const { myCurrentPage, totalPages } = this;

      if (totalPages <= 2) {
        return {
          start: 1,
          end: 0,
        };
      }

      // 小于等于7个按钮
      if (totalPages <= 7) {
        return {
          start: 2,
          end: totalPages - 1,
        };
      }

      // 大于7个按钮
      let start = myCurrentPage - 2;
      if (start < 2) start = 2;
      let end = start + 4;
      if (end > totalPages - 1) {
        end = totalPages - 1;
        start = end - 4;
      }

      return {
        start,
        end,
      };
    },
  },
  data() {
    return {
      myCurrentPage: this.currentPage,
      myPageSize: this.pageSize,
    };
  },
  methods: {
    // 跳转页码
    goPage: function (newCurrentPage) {
      // props数据是只读的，不能直接修改
      // this.currentPage = newCurrentPage;
      // 修改父组件数据
      // this.$emit("current-change", newCurrentPage);
      // 修改组件自己的数据
      this.myCurrentPage = newCurrentPage;
    },
    // 上一页
    prev() {
      this.myCurrentPage--;
    },
    // 下一页
    next() {
      this.myCurrentPage++;
    },
  },
  watch: {
    myPageSize(myPageSize) {
      const { totalPages, myCurrentPage } = this;
      // 当当前页码大于总页数时，要等于总页数
      if (myCurrentPage > totalPages) {
        this.myCurrentPage = totalPages;
      }

      this.$emit("size-change", myPageSize);
    },
    myCurrentPage(currentPage) {
      this.$emit("current-change", currentPage);
    },
  },
};
</script>

<style lang="less" scoped>
.pagination {
  display: flex;
  align-items: center;
}

.pagination__pager {
  display: flex;
  align-items: center;
}

.pagination__pager-number,
.pagination__btn {
  width: 30px;
  height: 30px;
  background-color: #eaeaea;
  color: #333;
  font-weight: 700;
  text-align: center;
  line-height: 30px;
  margin: 0 5px;
  border-radius: 2px;
  cursor: pointer;
}

.active {
  color: #fff;
  background-color: #c81623;
}

.pagination__btn {
  border: none;
  outline: none;
  &:disabled {
    color: #c0c4cc;
    cursor: not-allowed;
  }
}
.pagination__page-sizes {
  height: 30px;
  margin: 0 10px;
  outline: none;
}

.pagination__total {
  font-size: 14px;
  font-weight: 700;
}
</style>
